<!--
 * @Author: your name
 * @Date: 2020-03-29 20:13:33
 * @LastEditTime: 2020-03-30 19:49:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-imooc-ebook\src\components\ebook\EbookSettingFontPopup.vue
字体设置面板 -->
<template>
  <transition name="popup-slide-up">
    <div class="ebook-popup-list" v-show="fontFamilyVisible">
      <div class="ebook-popup-title">
        <div class="ebook-popup-title-icon" @click="hide">
          <span class="icon-down2"></span>
        </div>
        <span class="ebook-popup-title-text">{{$t('book.selectFont')}}</span>
      </div>
      <div class="ebook-popup-list-wrapper">
        <div class="ebook-popup-item" v-for="(item, index) in fontFamilyList" :key="index" @click="setFontFamily(item.font)">
          <!-- 当文字被选中时有一个selected状态 -->
          <div class="ebook-popup-item-text" :class="{'selected': isSelected(item)}">{{item.font}}</div>
          <div class="ebook-popup-item-check" v-if="isSelected(item)">
            <span class="icon-check"></span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { FONT_FAMILY } from '../../utils/book'
  import { ebookMixin } from '../../utils/mixin'
  import { saveFontFamily } from '../../utils/localStorage'
  export default {
    mixins: [ebookMixin],
    data() {
      return {
        fontFamilyList: FONT_FAMILY // 字体列表,写在utiles的book.js里,静态全局变量
      }
    },
    methods: {
      // 设置字体方法
      setFontFamily(font) {
      // console.log(font)
        this.setDefaultFontFamily(font)
        saveFontFamily(this.fileName, font)
      // console.log(this.defaultFontFamily)
      // 字体设置，通过场景对象themes的font方法设置电子书字体
      // 字体文件是通过css文件引入进去的,epubjs解决了这个问题,但是需要引入阅读器div内,在EbookReader.vue通过钩子函数hook()
        if (font === 'Default') {
          // Default没有设置默认字体
          this.currentBook.rendition.themes.font('Time New Roman')
        } else {
          this.currentBook.rendition.themes.font(font)
        }
      },
      // 判断字体列表是否被选中,选中后,后面显示一个勾勾图标.我们在设置字体是会将默认字体设置为我们选中的字体
      isSelected(item) {
        return this.defaultFontFamily === item.font
      },
      // 隐藏字体设置组件
      hide() {
        this.setFontFamilyVisible(false)
      }
    }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .ebook-popup-list{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 350;
    width: 100%;
    background: white;
    box-shadow: 0 px2rem(-4) px2rem(6) rgba(0,0,0, .1);
    .ebook-popup-title{
      position: relative;
      padding: px2rem(23);//15
      box-sizing: border-box;
      border-bottom: px2rem(1) solid #b8b9bb;
      text-align: center;
      @include center;
      .ebook-popup-title-icon{
        position: absolute;
        left: px2rem(20);//15
        top: 0;
        height: 100%;
        font-size: px2rem(30);//12
        font-weight: bold;
        @include center;
      }
      .ebook-popup-title-text{
        font-size: px2rem(30);//12
        font-weight: bold;
      }
    }
    .ebook-popup-list-wrapper{
      .ebook-popup-item{
        display: flex;
        padding: px2rem(24);//15
        .ebook-popup-item-text{
          flex: 1;
          font-size: px2rem(35);//14
          text-align: left;
           // &表示与.ebook-popup-title-text同级的
          &.selected {
          color: #346cb9;
          font-weight: bold;
          }
        }
        .ebook-popup-item-check{
          flex: 1;
          text-align: right;
          font-size: px2rem(35);//14
          font-weight: bold;
          color: #346cb9;
        }
      }
    }
  }
</style>
